<template>
  <div>
    <el-card class="box-card" style="margin:30px">
      <div slot="header" class="clearfix">
        <span>分类管理</span>
      </div>
      <div class="card-body">
        <div class="title">乐居分类:</div>
        <el-row :gutter="20">
          <el-col v-for="item in caterogyList" :key="item.id" :span="6">
            <el-card>
              <div slot="header">{{ item.name }}</div>
              <div class="card-main">
                <el-upload
                  class="avatar-uploader"
                  :action="actions"
                  :show-file-list="false"
                  :headers="headers"
                  :on-success="handleAvatarSuccess"
                  @click="selectimg(item)"
                >
                  <img v-if="item.icon" :src="item.icon" class="avatar" style="width:100%;height:300px">
                </el-upload>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <div class="title">全部分类</div>
        <el-table
          :data="tableList"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border

          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column
            prop="name"
            label="菜单名称"
            width="150"
            align="center"
          />
          <el-table-column label="icon" width="200" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.icon" alt="" style="width:60px;height:60px">
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="分类名字"
            width="180"
            align="center"
          />
          <el-table-column
            prop="sort"
            label="排序"
            width="120"
            align="center"
          />
          <el-table-column label="显示状态" width="150" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.showStatus === 1 ? '显示':'不显示' }}</div>
            </template>
          </el-table-column>
          <el-table-column label="导航栏展示" width="150" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.navStatus === 1 ? '展示':'不展示' }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述"
            width="120"
            align="center"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="200"
            align="center"
          />
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getAllCategory } from '@/api/product/category'
import { getToken } from '@/utils/myAuth'
export default {
  data() {
    return {
      tableList: [],
      caterogyList: [],
      select: [],
      actions: '/lejuAdmin/material/uploadFileOss'

    }
  },
  computed: {
    headers() {
      const token = getToken()
      return { token }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getAllCategory().then(res => {
        console.log(res)
        this.tableList = res.data.items.map((item) => {
          const obj = item.category
          obj.children = item.children
          return obj
        })
        // console.log(this.tableList)
        res.data.items.forEach(ele => {
          if (ele.category.name === '乐居') {
            this.caterogyList = ele.children
          }
        })
      })
    },
    selectimg(val) {
      this.select = val
    },
    handleAvatarSuccess(res, file) {
      this.$confirm('是否修改图片?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.select.icon = res.data.fileUrl
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.title{
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 30px;
  color: rgba(0,0,0,.85);
}
</style>
